<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>列表</title>
    <!--<link href="../../css/list.css" rel="stylesheet" />-->
    <link rel="stylesheet" href="../../font-awesome-4.7.0/css/font-awesome.min.css" />
        <link href="../../css/mui.min.css" rel="stylesheet"/>
        <link href="../../css/mui.picker.css" rel="stylesheet"/>
        <link href="../../css/mui.poppicker.css" rel="stylesheet" />
    <style>
    	.mui-tab-item{
    		width: auto;
    		padding:10px
    	}
    	/**{
    		background:#FFF;
    	}*/
    	.p_h{
    		overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /*行数，超出隐藏*/
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    	}
	/*.mui-btn {
		font-size: 16px;
		padding: 8px;
		margin: 3px;
	}
	h5.mui-content-padded {
		margin-left: 3px;
		margin-top: 20px !important;
	}
	h5.mui-content-padded:first-child {
		margin-top: 12px !important;
	}
	.ui-alert {
		text-align: center;
		padding: 20px 10px;
		font-size: 16px;
	}*/
    </style>
	</head>
	<body>
		<script id="tmp_list1" type="text/html">
		<% for(var i in items){ var item=items[i]; %>
			<li id="list<%= item.tid %>" class="mui-table-view-cell">
				<div id="<%= item.tid %>"style="text-align: center;" onclick="goto('resume','home','detail','<%= item.tid %>')">
					<% if(item.pic && item.pic.length>6){ %>

						<div style="width:50%;padding: 5px;float: left;">
								<p class="p_h">
								<i class="mui-icon mui-icon-person" style="font-size:1.1em ;"></i>：<%= item.name %>
									<span class="mui-badge mui-badge-warning"><%= item.profession %></span>
									<br/><i class="mui-icon mui-icon-location" style="font-size:1em ;"></i>：<%= item.region %>
<!--									<br/><i class="mui-icon mui-icon-person"></i>:<%= item.speciality %>-->
									<br/><i class="mui-icon mui-icon-info" style="font-size:1em ;"></i>：<%= item.content.substring(0,15) %>
								</p>
						</div>
						<div style="width:50%;padding: 5px;float: left; border-radius:5px;text-align: center;">
							<img  id="<%= item.pic %>" style="width: 60%;height: auto;" onerror="this.onerror=null;this.src='../../images/logo.png'"/>
							<!--<br><span type="button" class="mui-btn mui-btn-outlined"><%= item.profession %></span>-->
							<!--:<span class="mui-badge mui-badge-warning"><%= item.name %></span>-->
<!--							<div  style="margin-bottom: 0px;background:#EE3B3B;width:100%"><span style="padding:2px 5px;border-radius:5px;"><%= item.profession %></span></div>-->
							<!--<p style="position:relative; "onclick="addcollect('<%= item.tid %>','resume','<%= item.profession+':'+item.name %>')"><span style="background:#5CD31B;">收藏：
						<span id="collectnum<%= item.tid %>"><%= item.collect %></span></span></p>-->
						</div>

		        		<% } %>
				</div>
				<!--<% item.img %>-->
				<!--<div style="width:100%;float:left;font-size:0.8em;margin:5px 0;text-align:center;">
					<p style="width: 33%;float:left" >评论：<span id="commentnum"><%= item.comment %></span></p>
					<p style="width: 33%; float:left"onclick="zan('<%= item.tid %>','','resume')">
						<i class="fa fa-thumbs-o-up fa-1x"></i>：<span id="zannum <%= item.tid %>"><%= item.zan %></span></p>-->
						
					
				<!--</div>-->
			</li>
		<% } %>
		</script>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">人才库</h1>
		   
		</header>
		<div class="mui-content">
			       <ul class="mui-table-view" id="" style="height: auto;">
			       	<div id="content"></div>
			       </ul>
			       <div class="" id="pullRefresh_on"><span id="pullRefresh"></span></div>
	  </div>
	  <ul id="opta" class="mui-table-view"style="width: 100%;height:auto;font-size:2em;text-align:center;z-index: 101;display:none;">
    <li class="mui-table-view-cell">Item 3</li>
</ul>
   <nav class="mui-bar mui-bar-tab" id="nav" style="overflow-x: scroll;">
 		<div  class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="">
    		<div class="mui-scroll" style="position:absolute;" >

		        <a class="mui-control-item" onclick="selectcity(this.id);Show_Hidden('opta')" style="text-align:center;" >地区：<span id="province">北京市</span>-<span id="city">全部</span>
		        </a>
		         <a class="mui-control-item" onclick="listone('profession',0,'profession',0);Show_Hidden('opta')" >
		            职业：<span id='profession'>全部</span>
		        </a>
		    </div>
		</div>
    </nav>
	   <!--<div id='cityResult' class="ui-alert"></div>-->
	</body>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/cache/img.js"></script>
    <script src="../../js/lib/arttmpl.js"></script>
    <script src="../../js/app.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/mui.picker.js"></script>
    <script src="../../js/mui.poppicker.js"></script>
    <script src="../../js/city.data.js"></script>
    <script src="../json/profession.js"></script>
	<script type="text/javascript">

opta=document.getElementById('opta');

var opta=document.getElementById("opta");//定义下拉列表主表
var listJson={'0':'选择关联类','item':'项目','ziyuan':'资源','resume':'专业'};//定义主表菜单列表

function selectcity(htmlid){
var i=0;
var lisk='<li class="mui-table-view-cell" value="全部" onclick="Show_Hidden(\'opta\');lookcity(\''+htmlid+'\',\''+i+'\',\'全部\',\'全部\')">全部</li>';
for( var i=0; i< cityData.length;i++){//遍历json对象的每个key/value对,p为key
//	alert(cityData[i].text);
	lisk+='<li class="mui-table-view-cell" value="'+cityData[i].text+'" onclick="listcity(\''+htmlid+'\',\''+cityData[i].text+'\',\''+i+'\',\'0\')">'+cityData[i].text+'</li>';
}
opta.innerHTML=lisk+'<li  class="mui-table-view-cell"  onclick="Show_Hidden(\'opta\');lookcity(\''+htmlid+'\',\''+i+'\',\'\',\'\')">取消</li>';

}

function lookcity(type,mod,province,city){

	p=0;
if(city!='' || province !=''){
	document.getElementById('province').innerHTML=province;
	document.getElementById('city').innerHTML=city;
	item(0);//获取数据
}
}
function Show_Hidden(trid){
	var opta =document.getElementById(trid);
    if(opta.style.display=='block'){
    	opta.style.display='none';
        document.getElementsByClassName('mui-content')[0].style.display='block';
        //开启上拉功能
		mui("#pullRefresh").pullRefresh().setStopped(false);
    }else{
        opta.style.display='block';
        document.getElementsByClassName('mui-content')[0].style.display='none';
        //关闭上拉功能
		mui("#pullRefresh").pullRefresh().setStopped(true);
    }
}
var optbJson={
	//职业
		"profession":profession,
//		"city":cityData,
		 };
var num2=0;
function listcity(type,mod,childrennum,num2){
	children=cityData[childrennum].children;
//	alert(type+'-->'+mod+JSON.stringify(children[0].text));
//关闭上拉加载
		mui("#pullRefresh").pullRefresh().disablePullupToRefresh();
			//key是本地数据库的键值，
			var vals='<li class="mui-table-view-cell" onclick="Show_Hidden(\'opta\');lookcity(\''+type+'\',\''+mod+'\',\'全部\',\'全部\')">全部</li>';
			for(var i=0; i< children.length;i++){
		//	alert(result[i].id+'":"'+result[i].title);
			vals +='<li class="mui-table-view-cell" onclick="Show_Hidden(\'opta\');lookcity(\''+type+'\',\''+mod+'\',\''+cityData[childrennum].text+'\',\''+children[i].text+'\')">'+children[i].text+'</li>';
			}
		opta.innerHTML=vals+'<li type="button"  class="mui-table-view-cell" value="" onclick="Show_Hidden(\'opta\');lookcity(\''+type+'\',\'\',\'\',\'\')">取消</li>';
}
function listone(type,mod,str,num2){

		if(optbJson[type]){
			result= optbJson[type];
			if(result.length===0){
				alert('对不起不存在'+listJson[type]+'信息,请您发布该类信息后，再添加关联！');
//				selectone();//还原下拉列表
			return false;
			};
			//key是本地数据库的键值，
			var vals='<li class="mui-table-view-cell" onclick="Show_Hidden(\'opta\');lookrelation(\''+type+'\',\''+mod+'\',\'全部\',\'全部\')">全部</li>';
			for(var k in result){
		//	alert(result[i].id+'":"'+result[i].title);
			vals +='<li class="mui-table-view-cell" onclick="Show_Hidden(\'opta\');lookrelation(\''+type+'\',\''+mod+'\',\''+result[k]+'\',\''+k+'\')">'+result[k]+'</li>';
			}
		opta.innerHTML=vals+'<li type="button"  class="mui-table-view-cell" value="" onclick="Show_Hidden(\'opta\');lookrelation(\''+type+'\',\'\',\'\',\'\')">取消</li>';
		}
}
function lookrelation(type,mod,rid,title){
	p=0;
if(title!='' || rid !=''){
	document.getElementById(type).innerHTML=title;
	item(0);//获取数据
	//开启上拉功能
//		mui("#content").pullRefresh().setStopped(false);
}
}

mui.init({  
		pullRefresh: {  
		container: '#pullRefresh', //触发刷新功能的id标签
		down: {  //触发下拉函数
		height:100,// 可选.默认50.触发上拉加载拖动距离
        auto:false,// 可选,默认false.自动上拉加载一次
        style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
//    	color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
        range:'100px', //可选 默认100px,控件可下拉拖拽的范围
     	offset:'50px', //可选 默认0px,下拉刷新控件的起始位置
		contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
		contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
		contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
		callback: pulldownRefresh
	}
	,
		up : {//触发上拉
		height:50,// 可选.默认50.触发上拉加载拖动距离
		contentdown : " 下拉加载更多",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
		contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		callback :pullupRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
	}
              }  
          });  
//* 下拉刷新具体业务实现 
function pulldownRefresh() { 
	setTimeout(function () { 
	//            	document.getElementById('microblog').innerHTML='';
	item(0);//获取数据
	mui('#pullRefresh').pullRefresh().endPulldownToRefresh();//关闭上拉刷新样式
	}, 1500);  //1500毫秒触发
} 
 //* 下拉刷新具体业务实现 
function pullupRefresh() {
//	alert('上啦');
	setTimeout(function () { 
	item(1);//获取数据
	mui('#pullRefresh').pullRefresh().endPullupToRefresh();//关闭下拉加载样式
	}, 1500);  //1500毫秒触发
} 
item();
var	p= 0;
function item(num){//微博列表
	
	var headimg=home.uploads+"/user/a.jpg";
	if(num==1){
		p=p+1
	}else{
		p=0;
		document.getElementById("content").innerHTML='';
	};
	apptoken['p']= p;
	apptoken['act']= 'list';
	apptoken['kv']={
		"city":document.getElementById('city').innerText,
		"profession":document.getElementById('profession').innerText,
		"province":document.getElementById('province').innerText
//		"showCityPicker":document.getElementById('showCityPicker').innerText,
	};
	 mui.ajax(home.hos+'/resume',{
	 	data:apptoken,
	 	dataType:'text',//服务器返回json格式数据
	 	type:'post',//HTTP请求类型
		timeout:5000,//超时时间设置为5秒；
//		headers:{'Content-Type':'application/json'},
		success:function(data){
//	 	alert(data);
	 	if(data==204){
	 		plus.ui.toast('没有更多信息');
	 		return false;}
	 	jsonarrfor(data);
		},error:function(xhr,type,errorThrown){
		plus.ui.toast('服务器超时');
		console.log('服务器超时'+type);
	}});
}
function jsonarrfor(data){
	mui.plusReady(function() {

if(isJSON(data)){
			var result=JSON.parse(data);
		for(var i=0;i<result.length;i++){
				poster=result[i].image;
if(poster===null || poster==='' || poster==='undefined'){
	img='';
}else{
//	alert(result[i].poster);
	classimg="imgx1";
//	pic+='<div class="imgcenter '+classimg+' imgleft"><img src="'+home.uploads+'/shop/'+rpic[ib]+'"/></div>';
	pic='<div class="imgcenter '+classimg+' imgleft"><img src="'+home.uploads+'/img/resume/'+poster+'" onerror="this.src=\''+home.uploads+'/img/resume/'+poster+'\'" /></div>';
}
			
			createtime=new Date(parseInt(result[i].createtime) * 1000).format('yyyy-MM-dd hh:mm:ss');
			imgs = result[i].image || '';
			data={
						items:[{
							tid:result[i].id,
							pic:imgs,
							img:pic,
							user_id:result[i].user_id,
							follow:result[i].follow,
							region:result[i].province+'-'+result[i].city,
							name:result[i].name,
							zan:result[i].zan,
							comment:result[i].comment,
							collect:result[i].collect,
							profession:result[i].profession,
							speciality:result[i].speciality,
//							speciality:result[i].classname,
							content:result[i].synopsis,
							createtime:createtime
						}],
						src:home.uploads+'/img/resume/'
				};
			html = template('tmp_list1', data);
			document.querySelector("#content").innerHTML += html;
			//优先读取本地缓存图片,没有在网络下载;
	            setImg(imgs, home.uploads+'/img/resume/min'+imgs,'resume');

		}
	}else{
		plus.ui.toast("服务器有误");
	}

})
}

	</script>
</html>
